<app-workspace-switcher></app-workspace-switcher>

<div
  [class.fixed-menu]="menuFixed"
  (mouseenter)="menuIsHovered = true"
  (mouseleave)="menuIsHovered = false"
  class="mat-menu-floating p-3 fixed bg-gradient-to-b from-zinc-500/50 to-neutral-700/20 rounded-[48px] shadow-[2px_2px_12px_0px_rgba(0,0,0,0.10)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-[10px] z-[1000] !overflow-visible"
  [class.fixed-menu]="menuFixed"
>
  <div
    (click)="toggleMenu()"
    [matTooltip]="getTooltipText()"
    matTooltipClass="multiline-tooltip"
    matTooltipPosition="right"
    class="user-profile-button cursor-pointer !w-14 !h-14 bg-blend-soft-light bg-white/40 !rounded-full shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] backdrop-blur-2xl inline-flex justify-center items-center gap-2.5 overflow-hidden !aspect-square"
  >
    <img
      *ngIf="currentUser?.picture; else placeholder"
      [src]="currentUser?.picture"
      alt="User profile"
      class="!w-14 !h-14 object-cover rounded-full"
    />
    <ng-template #placeholder>
      <mat-icon class="m-auto">account_circle</mat-icon>
    </ng-template>
  </div>

  <div
    *ngIf="!isDesktop || menuIsHovered || menuFixed"
    class="menu-items !overflow-visible"
    [@fadeSlideInOut]
  >

    <div
      routerLink="/"
      matTooltip="Images"
      matTooltipPosition="right"
      class="md:mb-[10px] cursor-pointer w-14 h-14 bg-blend-soft-light bg-white/40 rounded-[48px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl inline-flex justify-start items-start gap-2.5"
    >
      <div
        *ngIf="router.isActive('/', true)"
        class="flex-1 h-14 bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 rounded-full blur-[3px] backdrop-blur-md"
      ></div>
      <div class="w-6 h-6 left-[16px] top-[16px] absolute overflow-hidden">
        <button
          matFab
          aria-label="Images"
          class="cursor-pointer w-6 h-6 left-0 top-0 absolute text-center justify-center text-neutral-200 text-2xl"
        >
          <mat-icon svgIcon="creative-studio-icon"></mat-icon>
        </button>
      </div>
    </div>

    <div
      routerLink="/video"
      matTooltip="Video"
      matTooltipPosition="right"
      class="md:mb-[10px] cursor-pointer w-14 h-14 bg-blend-soft-light bg-white/40 rounded-[48px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl inline-flex justify-start items-start gap-2.5 overflow-hidden"
    >
      <div
        *ngIf="router.isActive('/video', true)"
        class="flex-1 h-14 bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 rounded-full blur-[3px] backdrop-blur-md"
      ></div>
      <div class="w-6 h-6 left-[16px] top-[16px] absolute overflow-hidden">
        <button
          matFab
          aria-label="Video"
          class="cursor-pointer w-6 h-6 left-0 top-0 absolute text-center justify-center text-neutral-200 text-2xl"
        >
          <mat-icon>movie_edit</mat-icon>
        </button>
      </div>
    </div>

    <div
      routerLink="/audio"
      matTooltip="Audio"
      matTooltipPosition="right"
      class="md:mb-[10px] cursor-pointer w-14 h-14 bg-blend-soft-light bg-white/40 rounded-[48px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl inline-flex justify-start items-start gap-2.5 overflow-hidden"
    >
      <div
        *ngIf="router.isActive('/audio', false)"
        class="flex-1 h-14 bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 rounded-full blur-[3px] backdrop-blur-md"
      ></div>
      <div class="w-6 h-6 left-[16px] top-[16px] absolute overflow-hidden">
        <button
          matFab
          aria-label="Audio"
          class="cursor-pointer w-6 h-6 left-0 top-0 absolute text-center justify-center text-neutral-200 text-2xl"
        >
          <mat-icon svgIcon="audio-generation-icon"></mat-icon>
        </button>
      </div>
    </div>

    <div
      class="relative md:mb-[10px]"
      (mouseenter)="onToolsEnter()"
      (mouseleave)="onToolsLeave()"
    >
      <div
        [class.bg-white]="toolsMenuHovered"
        class="cursor-pointer w-14 h-14 bg-blend-soft-light bg-white/40 rounded-[48px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl inline-flex justify-start items-start gap-2.5 overflow-hidden transition-colors duration-200"
      >
        <div
          *ngIf="router.isActive('/fun-templates', true) || router.isActive('/vto', false)"
          class="flex-1 h-14 bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 rounded-full blur-[3px] backdrop-blur-md"
        ></div>
        <div class="w-6 h-6 left-[16px] top-[16px] absolute overflow-hidden">
          <button
            matFab
            aria-label="Tools"
            class="cursor-pointer w-6 h-6 left-0 top-0 absolute text-center justify-center text-neutral-200 text-2xl"
          >
             <mat-icon>handyman</mat-icon>
          </button>
        </div>
      </div>

      <div
        *ngIf="toolsMenuHovered"
        (mouseenter)="onToolsEnter()"
        (mouseleave)="onToolsLeave()"
        class="absolute left-[70px] top-0 p-3 flex flex-col gap-3 bg-gradient-to-b from-zinc-500/50 to-neutral-700/20 rounded-[24px] shadow-[2px_2px_12px_0px_rgba(0,0,0,0.10)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-[10px] z-[1001] min-w-[220px]"
        [@fadeSlideInOut]
      >
        <div class="absolute -left-[20px] top-0 bottom-0 w-[20px] bg-transparent"></div>

        <div
          routerLink="/vto"
          class="cursor-pointer w-full h-12 bg-blend-soft-light bg-white/40 rounded-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl relative overflow-hidden flex items-center group hover:bg-white/50 transition-all"
        >
          <div
            *ngIf="router.isActive('/vto', false)"
             class="absolute inset-0 bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 opacity-80 blur-[3px] backdrop-blur-md"
          ></div>

          <div class="relative flex items-center px-4 w-full z-10">
             <mat-icon class="text-neutral-200 mr-3">checkroom</mat-icon>
             <span class="text-neutral-200 font-medium text-sm whitespace-nowrap">Virtual Try-On</span>
          </div>
        </div>

        <div
          routerLink="/fun-templates"
          class="cursor-pointer w-full h-12 bg-blend-soft-light bg-white/40 rounded-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl relative overflow-hidden flex items-center group hover:bg-white/50 transition-all"
        >
          <div
            *ngIf="router.isActive('/fun-templates', true)"
            class="absolute inset-0 bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 opacity-80 blur-[3px] backdrop-blur-md"
          ></div>

          <div class="relative flex items-center px-4 w-full z-10">
             <mat-icon svgIcon="fun-templates-icon" class="text-neutral-200 mr-3"></mat-icon>
             <span class="text-neutral-200 font-medium text-sm whitespace-nowrap">Fun Templates</span>
          </div>
        </div>

        <div
          matTooltip="Coming Soon!"
          matTooltipPosition="right"
          class="cursor-not-allowed opacity-50 grayscale w-full h-12 bg-blend-soft-light bg-white/20 rounded-xl shadow-none outline outline-1 outline-offset-[-1px] outline-stone-400/50 backdrop-blur-md relative overflow-hidden flex items-center"
        >
          <div class="relative flex items-center px-4 w-full z-10">
             <mat-icon class="text-neutral-300 mr-3">hd</mat-icon>
             <span class="text-neutral-300 font-medium text-sm whitespace-nowrap">Imagen Upscale</span>
          </div>
        </div>

        <div
          routerLink="/workflows"
          matTooltip="Coming Soon!"
          matTooltipPosition="right"
          class="cursor-not-allowed opacity-50 grayscale w-full h-12 bg-blend-soft-light bg-white/40 rounded-xl shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl relative overflow-hidden flex items-center"
        >
          <div
            *ngIf="router.isActive('/workflows', false)"
             class="absolute inset-0 bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 opacity-80 blur-[3px] backdrop-blur-md"
          ></div>

          <div class="relative flex items-center px-4 w-full z-10">
             <mat-icon class="text-neutral-200 mr-3">hub</mat-icon>
             <span class="text-neutral-200 font-medium text-sm whitespace-nowrap">Workflows</span>
          </div>
        </div>

      </div>
    </div>


    <div
      routerLink="/gallery"
      matTooltip="Media Gallery"
      matTooltipPosition="right"
      class="md:mb-[10px] cursor-pointer w-14 h-14 bg-blend-soft-light bg-white/40 rounded-[48px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl inline-flex justify-start items-start gap-2.5 overflow-hidden"
    >
      <div
        *ngIf="router.isActive('/gallery', false)"
        class="flex-1 h-14 bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 rounded-full blur-[3px] backdrop-blur-md"
      ></div>
      <div class="w-6 h-6 left-[16px] top-[16px] absolute overflow-hidden">
        <button
          matFab
          aria-label="Arena"
          class="cursor-pointer w-6 h-6 left-0 top-0 absolute text-center justify-center text-neutral-200 text-2xl"
        >
          <mat-icon>bookmark_heart</mat-icon>
        </button>
      </div>
    </div>

    <div
      routerLink="/admin"
      *ngIf="authService.isUserAdmin()"
      matTooltip="Admin"
      matTooltipPosition="right"
      class="md:mb-[10px] cursor-pointer w-14 h-14 bg-blend-soft-light bg-white/40 rounded-[48px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl inline-flex justify-start items-start gap-2.5 overflow-hidden"
    >
      <div
        *ngIf="router.isActive('/admin', false)"
        class="flex-1 h-14 bg-gradient-to-r from-blue-500 via-violet-500 to-red-400 rounded-full blur-[3px] backdrop-blur-md"
      ></div>
      <div class="w-6 h-6 left-[16px] top-[16px] absolute overflow-hidden">
        <button
          matFab
          aria-label="Admin"
          class="cursor-pointer w-6 h-6 left-0 top-0 absolute text-center justify-center text-neutral-200 text-2xl"
        >
          <mat-icon>admin_panel_settings</mat-icon>
        </button>
      </div>
    </div>

    <div
      (click)="logout()"
      matTooltip="Logout"
      matTooltipPosition="right"
      class="cursor-pointer w-14 h-14 bg-blend-soft-light bg-white/40 rounded-[48px] shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] outline outline-1 outline-offset-[-1px] outline-stone-300/80 backdrop-blur-2xl inline-flex justify-start items-start gap-2.5 overflow-hidden"
    >
      <div class="w-6 h-6 left-[16px] top-[16px] absolute overflow-hidden">
        <button
          matFab
          aria-label="Logout"
          class="cursor-pointer w-6 h-6 left-0 top-0 absolute text-center justify-center text-neutral-200 text-2xl"
        >
          <mat-icon>exit_to_app</mat-icon>
        </button>
      </div>
    </div>
  </div>
</div>
